<template>
  <div class="all">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="首页" @click-left="onClickLeft">
      <template #left>
        <van-icon name="location" size="20" color="white" />&nbsp;
        <span style="color: white">{{ city }}</span>
      </template>
    </van-nav-bar>
    <!-- 下方整体div -->
    <div class="total">
      <!-- 轮播图div -->
      <div class="swipe_box">
        <!-- 轮播图开始 -->
        <van-swipe
          style="border-radius: 10px"
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item>
            <img src="/pic3.png" class="swip-img" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/pic2.png" class="swip-img" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/pic4.png" class="swip-img" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/pic1.png" class="swip-img" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 轮播结束 -->
      <!-- 播报今日疫情公告 -->
      <div class="announcement">
        <van-notice-bar
          left-icon="volume-o"
          :text="todayNumber"
          color="#222"
          background="#fff"
          scrollable
        />
      </div>

      <!-- 下方标题开始 -->
      <div class="first-title" style="display: flex">
        <div class="Horizontal-line"></div>
        <span class="top-title">门诊服务</span>
      </div>
      <mapp></mapp>
      <!-- 预约和查询结果部分 -->
      <van-row type="flex" gutter="10" class="threebox">
        <van-col class="yimiao" span="12" @click="toVaccine(1)">
          <div><span>疫苗预约</span></div>
        </van-col>
        <van-col span="12">
          <van-row type="flex" style="flex-direction: column">
            <van-col class="booking" span="12" @click="toVaccine(0)"
              >检测预约</van-col
            >

            <van-col class="result" span="12">
              <router-link to="/testresults"> 检测结果查询 </router-link>
            </van-col>
          </van-row>
        </van-col>
      </van-row>

      <!-- 小功能部分 -->
      <van-row type="flex" class="first-box">
        <van-col span="6">
          <router-link to="/typeofvirus">
            <img src="/images/travel.png" class="img" />
            <p>新病毒介绍</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/pofscience">
            <img src="/images/jindu.png" class="img" />
            <p>防疫科普</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/healthcode">
            <img src="/images/healthy.png" class="img" />
            <p>健康码</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/trackvaccine">
            <img src="/images/jinzhan.png" class="img" />
            <p>疫苗追踪</p>
          </router-link>
        </van-col>
      </van-row>

      <van-row type="flex" class="first-box second-box" style="margin-top: 0">
        <van-col span="6">
          <img src="/images/haiwai.png" alt="" class="img" />
          <p>周边疫情</p>
        </van-col>
        <van-col span="6">
          <router-link to="/travelpolicy">
            <img class="img" src="/images/travel.png" alt="" />
            <p>出行政策</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/choosetest">
            <img class="img" src="/images/yimiao.png" alt="" />
            <p>健康自评</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/epidemicgoods">
            <img src="/images/guonei.png" alt="" class="img" />
            <p>疫情物资</p>
          </router-link>
        </van-col>
      </van-row>
      <!-- 文章开始标题 -->
      <div class="first-title" style="display: flex">
        <div class="Horizontal-line"></div>
        <div class="top-title">医疗百科</div>
      </div>

      <!-- 文章导航栏 -->
      <!-- 文章导航栏 -->
      <van-tabs sticky color="#1074ff" v-model="navactive" class="article">
        <van-tab title="生活常识" name="1"></van-tab>
        <van-tab title="防疫抗疫" name="2"></van-tab>
        <van-tab title="名医科普" name="3"></van-tab>
        <van-tab title="健康咨询" name="4"></van-tab>
        <!-- 单一文章信息开始 -->
        <div v-if="articles">
          <div class="articleItem" v-for="(item, i) in articles" :key="i">
            <!-- 文章图文信息开始 -->
            <router-link :to="`/article?id=${item.id}`">
              <div class="articleItem-wrapper">
                <!-- 文章图像开始  -->
                <div class="articleImg">
                  <img v-if="item.image" :src="item.image" />
                </div>
                <!-- 文章图像结束 -->
                <!-- 文章简介开始 -->
                <div class="articleDes">
                  {{ item.title }}
                  <!-- 文章时间开始 -->
                  <div class="articleTime">
                    {{
                      moment
                        .unix(item.created_date)
                        .format("YYYY年MM月DD日 HH:mm")
                    }}
                  </div>
                  <!-- 文章时间结束 -->
                </div>
                <!-- 文章简介结束 -->
              </div>
            </router-link>
            <!-- 文章图文信息结束 -->
          </div>
        </div>
      </van-tabs>
    </div>
    <!-- 底部标签栏 -->
    <div class="tabbar">
      <tabber></tabber>
    </div>
  </div>
</template>

<script>
import Mapp from "../components/Map.vue";
import Tabber from "../components/Tabber.vue";
export default {
  components: { Tabber, Mapp },
  data() {
    return {
      articles: [],
      navactive: "1",
      city: "",
      todayNumber: ''
    };
  },
  methods: {
    loadArticles(cid) {
      this.axios.get(`${this.$base}article?id=${cid}`).then((res) => {
        this.articles = res.data.data;
      });
    },
    toVaccine(value) {
      // 1代表核酸 0代表疫苗
      sessionStorage.setItem("category", value);
      this.$router.push(`/choosepatient`);
    },
    onClickLeft() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      setTimeout(() => {
        this.getcity();
      }, 2100);
    },
    getcity() {
      this.city = sessionStorage.getItem("mapcity");
      // console.log("首页" + this.city);
    },
    getNow() {
      let url = "/newdata/g2/getOnsInfo?name=wuwei_ww_ww_today_notice";
      this.axios
        .get(url)
        .then((res) => {
          this.todayNumber = JSON.parse(res.data.data)[0].showNotice;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  mounted() {
    let cid = this.navactive;
    this.loadArticles(cid);
    this.getNow();
  },
  // 监听文章导航栏变化
  watch: {
    navactive(newValue, oldValue) {
      this.loadArticles(newValue);
    },
  },
};
</script>

<style lang="less" scoped>
a {
  color: #000;
}
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
// 三个方块的div
.threebox {
  line-height: 85px;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 0 0 15px 15px;
  // 左侧疫苗div
  .yimiao {
    width: 45%;
    position: relative;
    background: url(/images/head.png) no-repeat center;
    background-size: 100% 100%;
    border-radius: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    div {
      position: relative;
      // line-height: 170px;
      height: 170px;
      text-align: center;

      span {
        position: absolute;
        font-weight: 700;
        transform: translate(-45%);
        bottom: -5vw;
      }
    }
  }
  // 右侧预约div
  .booking {
    // background-color: #e9faf2;
    width: 99%;
    background: url(/images/left.png) no-repeat center;
    background-size: 100% 100%;
    margin-bottom: 5px;
    border-radius: 14px;
    margin-top: 10px;
    font-weight: 700;
  }
  // 右侧结果div
  .result {
    // background-color: #e9faf2;
    background: url(/images/right.png) no-repeat center;
    background-size: 100% 100%;
    color: black;
    width: 99%;
    font-weight: 700;

    border-radius: 14px;
    margin-bottom: 10px;
    a {
      text-decoration: none;
      color: black;
    }
  }
}
.all {
  background-color: #f8f8f8;
}
// 除了导航栏最大的div
.total {
  width: 90%;
  // padding: 12.5px;
  margin: 0 auto;
  background-color: #f8f8f8;
  // 轮播图样式
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    background-color: #39a9ed;
    height: 130px;
    .swip-img {
      width: 100%;
      height: 100%;
    }
  }
  .swipe_box {
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
  }
  // 标题门诊div
  .first-title {
    width: 100%;
    // margin-top: 20px;
    padding-top: 10px;
    align-items: center;
    border-radius: 15px 15px 0 0;
    background-color: #fff;
    // 标题文字部分
    .top-title {
      font-size: 17px;
    }
    // 标题的蓝色横线
    .Horizontal-line {
      height: 6px;
      width: 16px;
      background-color: #1074ff;
      margin-right: 10px;
    }
  }
}
// 小程序的整体div
.first-box {
  margin-top: 7.5px;
  text-align: center;
  font-size: 14px;
  background-color: #fff;
  border-radius: 15px 15px 0 0;
  // 小程序文字部分
  p {
    margin: 10px;
  }
  // 小程序图片部分
  .img {
    height: 35px;
    width: 39px;
    margin-top: 10px;
  }
}
.second-box {
  border-radius: 0 0 15px 15px;
}
.tabbar {
  margin-top: 50px;
  overflow: hidden;
}

// 文章导航栏css
.articleItem {
  // margin: 0 10px;
  background-color: #fff;
}
.articleItem:first-child {
  margin-top: 15px;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}

.articleItem-wrapper {
  display: flex;
  align-items: center;
  margin: 0 auto;
  // width: 98%;

  margin-bottom: 3px;
}
.articleImg {
  margin-right: 15px;
  img {
    height: 60px;
    width: 97px;
  }
}
.articleDes {
  flex: 1;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
  .articleTime {
    text-align: right;
    margin-right: 5px;
    font-size: 12px;
  }
}
.announcement {
  margin: 3vw auto;
  // background-color: ;
  // border: 1px solid red;
  
  .van-notice-bar {
    font-size: 3.2vw;
    border-radius: 2vw;
  }
}
</style>
